<template>
    <div class="loginContainer">
    <h1>登录</h1>
    <form action="./checkUser.php" onsubmit="return false" method="post">姓名：
      <input v-model.lazy="username" class="inputStyle1 inputStyle username" type="text" name="username" />
      <span v-show="fn()" class="exchange">用户名不正确</span>
      <br />密码：
      <input v-model.lazy="pwd" class="inputStyle pwd" type="password" name="pwd" /><br />
      记住我 <input type="checkbox" class="remeber" />
      <input @click="submit" class="loginStyle" type="submit" value="登录" />
      <button @click="changeCart">点击我修改购物车数据</button>
    </form>
  </div>
</template>
<script>
export default {
    data(){
     return{
          username:"张三",
          pwd:"123",
     }
    },
    methods:{
      fn(){
        if(this.username.length>0){
          return false;
        }else{
          return true;
        }
      },
      submit:async function(){
        let {data}=await this.$http({
          method:"post",
          url:"/api/getdata",
          data:{
            username:this.username,
            pwd:this.pwd
          }
        })
        let token =data.token
        localStorage.setItem("token",token);
        if(data.status==1){
          localStorage.setItem("login",true)
          this.$router.push("news/addnews")
        }
      },
      
      async changeCart(){
        //修改商品的时候需要把token带到请求头里面判断你有没有权限
    let {data} = await this.$http.get("/api/getcart",{
        // headers:{
        //   "Authorization":"Bearer "+localStorage.getItem("token")
        //   //Bearer后面必须有一个空格不然会报错
        // }
      });
      console.log(data);
      }
    }
}
</script>
<style scoped>
.loginContainer{
    margin: 0 auto;
    width: 600px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    border: 1px solid;
}
.loginContainer input{
    margin-bottom: 20px;
}
.loginStyle{
    width: 160px;
    height: 40px;
    background: rgb(50,203,77);
    color: white;
    font-size: 17px;
}
.inputStyle{
    width: 200px;
    height: 30px;
    padding: 5px;
    outline: none;
}

.inputStyle:focus{
    border: 1px solid rgb(50,203,77);
}
form{
    position: relative;
}
.exchange{
    position: absolute;
    top:8px;
    right: 65px;
    color: red;
}
</style>